<template>
  <div class="menuEdit detailView">
    <Modal v-model="isView" :mask-closable="false" title="编辑菜单" :footer-hide="true">
      <Form :model="item" label-position="right" :label-width="100" :rules="rules" ref="form">
        <FormItem label="名称" prop="text">
          <Input v-model="item.text" type="text"/>
        </FormItem>
        <FormItem label="URl" prop="href">
          <Input v-model="item.href" type="text" :rows="4"/>
        </FormItem>
        <FormItem label="是否文件夹" prop="isFolder">
          <i-switch v-model="item.isFolder" :disabled="editType=='add'"></i-switch>
        </FormItem>
        <FormItem label="是否显示" prop="isShow">
          <i-switch v-model="item.isShow"></i-switch>
        </FormItem>
        <FormItem label="级别" prop="level">
          <Select v-model="item.level" class="select_1" :disabled="editType=='add'">
            <Option value="1">一级菜单</Option>
            <Option value="2">二级菜单</Option>
          </Select>
        </FormItem>
        <FormItem label="上级菜单" prop="parentId">
          <Select v-model="item.parentId" placeholder='天下医生' class="select_1" :disabled="editType=='add'">
            <Option :value="parentMenu.id" v-for="(parentMenu) in parentMenuList" :key="parentMenu.id">{{parentMenu.title}}</Option>
          </Select>
        </FormItem>
        <FormItem label="排序" prop="sortCode">
          <InputNumber v-model="item.sortCode"></InputNumber>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="item.remark" type="text" :rows="4"/>
        </FormItem>
      </Form>
      <div class="operationView">
        <Button type="primary" class="operation_btn" @click="handleCancle">取消</Button>
        <Button type="primary" class="operation_btn" @click="handleSave">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "menuEdit",
    data() {
      let validateSortNum = (rule, value, callback) => {
        if (!/^[1-9]\d*|0$/.test(value) ) {
          callback(new Error('请输入正整数排序编号'))
        } else {
          callback()
        }
      }
      return {
        isView: false,
        editType: 'add',
        item: {
          id: 0,
          parentId: null,
          text: '',
          href: '',
          remark: '',
          sortCode: null,
          isFolder: false,
          isShow: true,
          level: null,
          isDelete: 0
        },
        parentMenuList: [],
        rules: {
          text: [
            {required: true, message: '请输入名称', trigger: 'blur' }
          ],
          href: [
            {required: true, message: '请输入url', trigger: 'blur' }
          ],
          sortCode: [
            { validator: validateSortNum, trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      openView(row, flag, parentMenuList) {
        this.isView = true
        this.$refs['form'].resetFields();
        this.parentMenuList = parentMenuList
        this.editType = flag
        if (this.editType == 'add') {
          let isFolder = row.isFolder
          if (row.isFolder == 'all') {
            isFolder = true
          } else {
            isFolder = false
          }
          this.item = {
            id: 0,
            parentId: row.id,
            text: '',
            href: '',
            remark: '',
            isFolder: isFolder,
            isShow: true,
            sortCode: null,
            level: isFolder ? '1' : '2',
            isDelete: 0
          }
        } else {
          this.item = Object.assign({},row)
          this.item.id = row.id
          this.item.parentId = row.parentId
          this.item.text = row.title
          this.item.href = row.href
          this.item.remark = row.remark
          this.item.isFolder = row.isFolder == 0 ? false : true
          this.item.isShow = row.isShow == 'YES' ? true : false
          this.item.sortCode = row.sortCode
          this.item.isDelete = row.isDelete
        }
      },
      handleCancle(){
        this.isView = false
        this.$refs['form'].resetFields();
      },
      handleSave(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({},this.item)
            obj.isFolder = obj.isFolder ? '1' : '0'
            obj.isShow = obj.isShow ? 'YES' : 'NO'
            this.ajax({
              type: this.api.menuEdit.type,
              url: this.api.menuEdit.url,
              data: obj,
              isSubmit: true,
              success: (data) => {
                this.$Message.success('保存成功！');
                this.handleCancle()
                this.$emit('getList')
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          }
        })
      },
    },
    components: {}
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .menuEdit {
  }
</style>
